<template>
    <Modal v-model="showModal"  width="300px" title="字段配置" :mask-closable="false">
        <CheckboxGroup v-model="selected">
            <ul ref="list" style="list-style:none;">
                <li draggable="true" class="fieldLi"
                    v-for="(item, index) in resColumn" 
                    :data-id="item" 
                    :data-index="index" 
                    :key="item"
                    @dragstart="dragstartEvent"
                    @dragend="dragendEvent"
                    @dragenter="dragenterEvent"
                    @dragleave="dragleaveEvent"
                    @dragover="dragoverEvent"
                    @drop="dropEvent"
                >
                    <Checkbox :label="item" :key="item" style="margin-left:32px;"></Checkbox>
                </li>
            </ul>
        </CheckboxGroup>
        <div slot="footer">
            <Button @click="showModal = false">取 消</Button>
            <Button @click="reset">初始化</Button>
            <Button type="primary" @click="saveSetting">确 定</Button>
        </div>
    </Modal>
</template>

<script>
    export default {
        props: ['resColumn', 'selectColumns', 'name', 'show'],  //原始字段中文名称数组，选中字段中文名称数组
        data() {
            return {
                selected: [],   //选中数组
                showModal: false,
            }
        },
        watch:{
            //父组件属性更新时，更新子组件
            show(){
                this.showModal = this.show;
            },
            selectColumns(){
                this.selected = this.selectColumns;
            },
            //子组件属性更新时，通知父组件, 之所以这么麻烦是因为不允许子组件直接修改父组件的值
            showModal(){
                if(this.showModal == false) {
                    this.$emit('settingHide');
                }
            },
        },
        created(){
            this.showModal = this.show;
            this.selected = this.selectColumns;
            //根据columns生成选中数组
            for(let k in this.columns) {
                if(this.columns[k].hidden != 1) {
                    this.selected.push(this.columns[k].key);
                }
            }
        },
        methods: {
            //保存表格配置
            saveSetting(){
                //列顺序数组
                let order = [];
                var lis = this.$refs.list.querySelectorAll('li');
                lis.forEach(e => {
                    let title = e.getAttribute('data-id');
                    if(this.selected.indexOf(title) != -1) {
                        order.push(title);
                    }else{

                    }
                });
                if(order.length == 0) {
                    return this.$Message.error('不能隐藏所有列');
                }
                pub.setCache(this.name, order);
                this.$emit('initTable');
            },
            //还原配置
            reset() {
                this.$emit('resetTable');
            },




            //以下都是拖拽代码

            //拖拽开始(参数是原始元素)
            dragstartEvent(ev) {
                ev.dataTransfer.setData("start", ' ');  //必须写这行,兼容火狐
                this.dragElement = ev.target;
                ev.target.style.backgroundColor = '#f8f8f8';
            },
            //进入元素(目标元素)
            dragenterEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    ev.target.parentNode.insertBefore(this.dragElement, ev.target);
                }
            },
            //移动过程
            dragoverEvent(ev) {
                ev.preventDefault();
            },
            //离开元素(目标元素)
            dragleaveEvent(ev) {
                if(ev.target.tagName == 'LI' && this.dragElement != ev.target){
                    if(this.lock && (ev.target == ev.target.parentNode.lastElementChild || ev.target == ev.target.parentNode.lastChild)){
                        ev.target.parentNode.appendChild(this.dragElement);
                        this.lock = false;
                    }else{
                        this.lock = true;
                    }
                }
            },
            //拖拽结束(目标元素元素)
            dropEvent(ev) {
                ev.preventDefault();
            },
            //拖拽结束(原始元素)
            dragendEvent(ev) {
                ev.target.style.backgroundColor = '#fff';
                ev.preventDefault();
                this.is_order = true;
            },
        }
    }
</script>

<style scoped>
.fieldLi{height: 30px;line-height:30px;}
</style>